<template>
    <el-dialog v-model="centerDialogVisibleFlag" title="提醒" style="width: 500px;" align-center>
        <div class="dialog_content_box">
            <el-icon>
                <WarningFilled />
            </el-icon>
            <p>确定要给该学生发送缴费提醒吗？</p>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="clearSendWarn">取消</el-button>
                <el-button type="primary" @click="sendWarnHandle" :disabled="flagTime > 0">
                    <span v-if="flagTime > 0">{{ flagTime }}s </span> 确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <addFileView ref="addFileView" />
    <div class="app-table">
        <div class="app-body">
            <div class="header">
                <div :class="{ 'headerCard': active !== 0, 'headerCard_active': active === 0 }" @click="active = 0"
                    ref="myDiv" :style="{ height: divHeight + 'px' }">
                    <div class="headerTop flex">
                        <div class="flex">
                            <div class="imgBox" v-if="active !== 0">
                                <img src="../../assets/paymentDetail_icon1.png">
                            </div>
                            <div class="imgBox1" v-if="active === 0">
                                <img src="../../assets/paymentDetail_icon2.png">
                            </div>
                            <p :class="{ 'color1': active === 0 }">应收</p>
                        </div>
                        <img class="checkedImg" src="../../assets/paymentDetail_icon3.png" v-if="active === 0">
                    </div>
                    <div class="headerMain">
                        <div>
                            <div class="total" :class="{ 'color1': active === 0 }">{{ statistics.total }}</div>
                            <div class="pName" :class="{ 'color2': active === 0 }">收费总人数 (人)</div>
                        </div>
                        <div class="xian"></div>
                        <div>
                            <div class="payTotal" :class="{ 'color1': active === 0 }">￥{{ statistics.paymentAmountTotal
                                }}</div>
                            <div class="pName" :class="{ 'color2': active === 0 }">收费总金额 (元)</div>
                        </div>
                    </div>
                </div>
                <div :class="{ 'headerCard': active !== 1, 'headerCard_active': active === 1 }" @click="active = 1"
                    ref="myDiv" :style="{ height: divHeight + 'px' }">
                    <div class="headerTop flex">
                        <div class="flex">
                            <div class="imgBox" v-if="active !== 1">
                                <img src="../../assets/paymentDetail_icon1.png">
                            </div>
                            <div class="imgBox1" v-if="active === 1">
                                <img src="../../assets/paymentDetail_icon2.png">
                            </div>
                            <p :class="{ 'color1': active === 1 }">减免数据</p>
                        </div>
                        <img class="checkedImg" src="../../assets/paymentDetail_icon3.png" v-if="active === 1">
                    </div>
                    <div class="headerMain">
                        <div>
                            <div class="total" :class="{ 'color1': active === 1 }">{{ statistics.allReduceTotal }}</div>
                            <div class="pName" :class="{ 'color2': active === 1 }">减免总人数 (人)</div>
                        </div>
                        <div class="xian"></div>
                        <div>
                            <div class="payTotal" :class="{ 'color1': active === 1 }">￥{{
        statistics.reducedPaymentAmountTotal }}</div>
                            <div class="pName" :class="{ 'color2': active === 1 }">减免总金额 (元)</div>
                        </div>
                    </div>
                </div>
                <div :class="{ 'headerCard': active !== 2, 'headerCard_active': active === 2 }" @click="active = 2"
                    ref="myDiv" :style="{ height: divHeight + 'px' }">
                    <div class="headerTop flex">
                        <div class="flex">
                            <div class="imgBox" v-if="active !== 2">
                                <img src="../../assets/paymentDetail_icon1.png">
                            </div>
                            <div class="imgBox1" v-if="active === 2">
                                <img src="../../assets/paymentDetail_icon2.png">
                            </div>
                            <p :class="{ 'color1': active === 2 }">已收</p>
                        </div>
                        <img class="checkedImg" src="../../assets/paymentDetail_icon3.png" v-if="active === 2">
                    </div>
                    <div class="headerMain">
                        <div>
                            <div class="total" :class="{ 'color1': active === 2 }">{{ statistics.payableTotal }}</div>
                            <div class="pName" :class="{ 'color2': active === 2 }">已缴费总人数 (人)</div>
                        </div>
                        <div class="xian"></div>
                        <div>
                            <div class="payTotal" :class="{ 'color1': active === 2 }">￥{{ statistics.payableAmountTotal
                                }}</div>
                            <div class="pName" :class="{ 'color2': active === 2 }">已缴费总金额 (元)</div>
                        </div>
                    </div>
                </div>
                <div :class="{ 'headerCard': active !== 3, 'headerCard_active': active === 3 }" @click="active = 3"
                    ref="myDiv" :style="{ height: divHeight + 'px' }">
                    <div class="headerTop flex">
                        <div class="flex">
                            <div class="imgBox" v-if="active !== 3">
                                <img src="../../assets/paymentDetail_icon1.png">
                            </div>
                            <div class="imgBox1" v-if="active === 3">
                                <img src="../../assets/paymentDetail_icon2.png">
                            </div>
                            <p :class="{ 'color1': active === 3 }">未收</p>
                        </div>
                        <img class="checkedImg" src="../../assets/paymentDetail_icon3.png" v-if="active === 3">
                    </div>
                    <div class="headerMain">
                        <div>
                            <div class="total" :class="{ 'color1': active === 3 }">{{ statistics.unTotal }}</div>
                            <div class="pName" :class="{ 'color2': active === 3 }">未缴费总人数 (人)</div>
                        </div>
                        <div class="xian"></div>
                        <div>
                            <div class="payTotal" :class="{ 'color1': active === 3 }">￥{{
        statistics.unPayableAmountTotal }}</div>
                            <div class="pName" :class="{ 'color2': active === 3 }">未缴费总金额 (元)</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="" :label-width="formLabelWidth" prop="gradeId">
                        <el-select v-model="form.gradeId" autocomplete="off" @change="filterGradeId" clearable
                            style="width: 200px;" placeholder="请选择所在年级">
                            <el-option v-for=" gradeId  in  gradeIds " :key="gradeId" :value="gradeId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth" prop="classId">
                        <el-select v-model="form.classId" autocomplete="off" placeholder="请选择所在班级" clearable
                            style="width: 200px;" @change="reloadData">
                            <el-option v-for=" item  in  classInfos " :key="item.classId"
                                :value="item.classId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="姓名" v-model="form.studentName"><template #suffix style="width: 200px;">
                                <el-icon class="el-input__icon">
                                    <Search />
                                </el-icon>
                            </template></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="学号" v-model="form.studentNumber"><template #suffix style="width: 200px;">
                                <el-icon class="el-input__icon">
                                    <Search />
                                </el-icon>
                            </template></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="downBtn" type="primary" @click="onSubmit"
                            @keyup.enter="searchEnter">搜索</el-button>
                        <el-button class="fileBtn" type="primary" @click="downLoad" plain element-loading-text="加载中..."
                            v-loading.fullscreen.lock="fullscreenLoading">下载缴费模版</el-button>
                        <el-button class="uploadBtn" type="primary" plain @click="importExcel">上传缴费名单</el-button>
                        <el-button class="downBtn1" type="primary" @click="expoetExcel">导出报表</el-button>
                        <!-- <el-button class="downBtn1" type="primary" @click="onSubmit" >批量减免</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="list" header-row-class-name="table_header" size="large"
                :header-cell-style="{ background: '#F0F0F0', color: '#999999', height: '50px', }">

                <el-table-column prop="paymentName" label="任务名称" width="300" style="white-space: nowrap;" />
                <el-table-column prop="payStatus" label="班级" min-width="120">
                    <template #default="scope">
                        <p style="white-space: nowrap; margin: 0;">高{{ scope.row.gradeId }}级({{ scope.row.classId }})班
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="studentName" label="学生姓名" style="white-space: nowrap;" min-width="100" />
                <el-table-column prop="studentNumber" label="学生学号" style="white-space: nowrap;" min-width="100" />
                <el-table-column prop="paymentAmount" label="缴费金额" style="white-space: nowrap;" min-width="100" />
                <el-table-column prop="reducedPaymentAmount" label="减免金额" style="white-space: nowrap;"
                    min-width="100" />
                <el-table-column prop="payableAmount" label="已缴费金额" style="white-space: nowrap;" min-width="120" />
                <el-table-column prop="unpaidAmount" label="未缴费金额" style="white-space: nowrap;" min-width="120" />
                <el-table-column prop="payStatus" label="缴费状态" style="white-space: nowrap;" min-width="100">
                    <template #default="scope">
                        <p style="color:#ff0000; margin: 0; padding: 0;" v-if="scope.row.status == 2">已作废</p>
                        <p style="color:#ff0000; margin: 0; padding: 0;"
                            v-if="scope.row.status != 2 && scope.row.payStatus != '03'">未交费</p>
                        <p style="color:#67C23A; margin: 0; padding: 0;"
                            v-if="scope.row.status != 2 && scope.row.payStatus == '03'">已缴费</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" style="white-space: nowrap;" min-width="200">
                    <template #default="scope">
                        <button class="edit_btn" style="margin-left: 10px;"
                            v-if="scope.row.payStatus != '03' && scope.row.status != 2"
                            @click="sendWarn(scope.row.paymentId, scope.row.studentNumber, scope.row.studentName)">发送缴费提醒</button>
                        <button class="edit_btn" v-if="scope.row.payStatus != '03' && scope.row.status != 2"
                            @click="voidHandle(scope.row.id, scope.row.studentName)">作废</button>
                        <button class="del_btn" style="margin-left: 10px;"
                            v-if="scope.row.payStatus != '03' && scope.row.status != 2"
                            @click="updateReduced(scope.row.studentName, scope.row.studentNumber)">减免</button>
                    </template>
                </el-table-column>

                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <div style="margin-top: 20px;display: flex; justify-content: end;">
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="pageSize" :current-page="page"
                        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        @size-change="changePageSize" @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
    </div>

</template>
<script>

import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { getGradeIds } from "@/utils/dateFormat";
import { Picture as IconPicture, Upload, Location, ArrowDown, Search, ArrowRight } from "@element-plus/icons-vue";
import { Loading } from "element-plus/es/components/loading/src/service";
import bottomView from "@/components/bottom.vue";
import addFileView from "@/components/payment/addExcelFile.vue";

export default {
    name: "classTeacherList",
    data() {
        return {
            active: 0,
            type: 0,
            title: "",
            page: 1,
            pages: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            payList: [],
            paymentId: "",
            divHeight: "",
            fullscreenLoading: false,
            form: {
                studentName: "",
                studentNumber: "",
                classId: "",
                gradeId: "",
            },
            gradeIds: getGradeIds(),
            classInfos: [],
            map: {},
            statistics: {},
            centerDialogVisibleFlag: false,
            sendWarnId: '',
            sendWarnNumber: '',
            flagTime: 10,

        };
    },
    created() { },
    watch: {
        active(newValue) {
            this.page = 1
            this.getPaymentDetailList();
        }
    },
    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        bottomView, addFileView,
        ElMessage, Upload, Location, ArrowDown, ArrowRight, Search
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.updateDivSize();
        window.addEventListener('resize', this.updateDivSize);
        this.paymentId = this.$route.query.id
        this.getPaymentDetailList();
        this.getPaymentPrintView()
        this.getBaseClassInfoList()

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateDivSize);
    },
    computed: {

    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.page = 1;
                this.getPaymentDetailList();
            }
        },
        filterGradeId(val) {
            this.classInfos = this.map[val];
            this.page = 1;
            this.getPaymentDetailList()
        },
        getBaseClassInfoList() {
            httpService("/javaApi/baseClassInfo/getAllEffectClass", {}, "get").then(
                (data) => {
                    this.map = data;
                }
            );
        },
        updateDivSize() {
            if (this.$refs.myDiv) {
                this.divWidth = this.$refs.myDiv.offsetWidth;
                this.divHeight = this.divWidth * (147 / 397)
                // console.log(this.divWidth, this.divHeight);
                // console.log(this.$refs.myDiv);
                // this.$refs.myDiv.style.height = this.divHeight
            }
        },
        reloadData() {
            this.page = 1;
            this.getPaymentDetailList()
        },

        onSubmit() {
            this.page = 1;
            this.getPaymentDetailList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            // this.limit = size;
            this.getPaymentDetailList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getPaymentDetailList();
        },

        getPaymentDetailList() {
            httpService(
                `/javaApi/userPayment/list/${this.page}/${this.pageSize}/${this.paymentId}`, {
                gradeId: this.form.gradeId ? this.form.gradeId : "",
                classId: this.form.classId ? this.form.classId : "",
                studentName: this.form.studentName,
                studentNumber: this.form.studentNumber,
                operateType: this.active
            }, "get"
            ).then((data) => {
                this.list = data.list
                this.total = data.total

            });
        },
        getPaymentPrintView() {
            httpService(
                `/javaApi/payment/printView/${this.paymentId}`,
                {}, "get"
            ).then((data) => {
                if (data.code == 200) {
                    this.statistics = data.object
                } else {
                    ElMessage.error("请求失败,请联系管理员！")
                }

            });
        },
        downLoad() {
            this.fullscreenLoading = true;
            httpService(
                `/javaApi/payment/exportStudents`,
                { paymentId: this.paymentId }, "get"
            ).then((data) => {
                this.fullscreenLoading = false
                if (data.code == 200) {
                    window.open("https://wx.zhengzhong.cn" + data.message)
                } else {
                    ElMessage.error("下载失败,请联系管理员！")
                }
            });
        },
        expoetExcel() {
            this.fullscreenLoading = true;
            let num = 0
            this.active == 0 ? num = 4 : num = this.active
            httpService(
                `/javaApi/userPayment/exportUserPayments/${this.paymentId}/${num}`,
                {}, "get"
            ).then((data) => {
                this.fullscreenLoading = false
                if (data.code == 200) {
                    window.open("https://wx.zhengzhong.cn" + data.message)
                } else {
                    ElMessage.error("下载失败,请联系管理员！")
                }
            });
        },
        importExcel() {
            console.log(this.$refs.addFileView);
            this.$refs.addFileView.dialogFormVisible = true;
            this.$refs.addFileView.title = "批量创建";
            this.$refs.addFileView.uploadApiUrl = "/javaApi/baseStudent/importExcelAndPayment";
            this.$refs.addFileView.paymentId = this.paymentId
            this.$refs.addFileView.getPaymentAmountList()
        },
        sendWarn(id, studentNumber, studentName) {
            this.sendWarnId = id
            this.sendWarnNumber = studentNumber
            this.flagTime = 10
            this.centerDialogVisibleFlag = true
            let timer = setInterval(() => {
                if (this.flagTime == 0) {
                    clearInterval(timer)
                    // this.flagTime = 10
                } else {
                    this.flagTime -= 1
                }
            }, 1000)

        },
        clearSendWarn() {
            this.sendWarnId = ""
            this.sendWarnNumber = ""
            this.flagTime = 10
            this.centerDialogVisibleFlag = false
        },
        sendWarnHandle() {
            let params = new FormData()
            params.append("id", this.sendWarnId)
            params.append("studentNumber", this.sendWarnNumber)
            console.log(this.sendWarnId, this.sendWarnNumber);
            httpService("/javaApi/pay/sendPayMessageByPaymentId", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success("发送缴费提醒成功");
                        this.clearSendWarn()
                    } else {
                        ElMessage.error("发送缴费提醒失败，请重试！");
                    }
                }
            );
        },

        updateReduced(studentName, studentNumber) {
            ElMessageBox.confirm(`确定要减免${studentName}的缴费吗？`, "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData()
                    params.append("paymentId", this.paymentId)
                    params.append("studentNumber", studentNumber)
                    httpService("/javaApi/payment/updateReduced", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("减免成功");
                                this.getPaymentDetailList();
                            } else {
                                ElMessage.error("减免失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        voidHandle(id, studentName) {
            ElMessageBox.confirm(`确定要作废${studentName}的缴费吗？`, "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData()
                    params.append("id", id)
                    params.append("status", 2)
                    httpService("/javaApi/userPayment/updateByStatus", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("作废成功");
                                this.getPaymentDetailList();
                            } else {
                                ElMessage.error("作废失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },


    },
};
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 5px 10px 0px;
}

.app-body {
    background: white;
    padding: 10px;
    min-height: calc(100vh - 135px);
    margin-bottom: 10px
}

#pay_top {
    width: 100%;
    height: 165px;
    background: url(../../assets/StudentPaymentTop.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    margin-bottom: 15px;
}

.flex {
    display: flex;
    align-items: center;
}

.top_title {
    padding: 50px 0 0 30px;
    font-size: 29px;
    color: #0065FF;
}

.top_btn_box {
    display: flex;
    margin: 0 0 0 30px;
    padding-top: 100px;
}

.top_btn_li {
    width: 154px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: brown;
    border-radius: 3px;
}

.top_btn_li img {
    margin-right: 10px;
}

.top_btn_li1 {
    background-color: #007EFF;
}

.top_btn_li2 {
    color: #FF7200;
    border: 1px solid #FF7200;
    background-color: #fff;
}

.top_btn_li3 {
    color: #15BA11;
    border: 1px solid #15BA11;
    background-color: #fff;
}

.table_header {
    border-radius: 5px 5px 0 0;
    color: #5B5A7E;
}

.navBox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    height: 20px;
}

.btn1 {
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.btn11 {
    color: #fff;
    background-color: #007EFF;
    border: none;
}

.btn12 {
    color: #fff;
    background-color: #FF7200;
    border: none;
}

.btn13 {
    color: #0065FF;
    background-color: transparent;
    border: 1px solid #0065FF;
}

.btn2 {
    color: #0065FF;
    font-size: 14px;
    background-color: transparent;
    border: none;
}

.shuxian {
    color: #8E8E8E;
    font-size: 12px;
}

.el-popconfirm__main {
    display: none !important;
}

.el-popconfirm__icon {
    display: none !important;
}

.moreBtn_box {
    width: 300px;
    display: flex;
}

.moreBtn_box button {
    background-color: transparent;
    border: none;
    color: #333333;
}

.serach_btn {
    width: 80px;
    border-radius: 3px;
    font-size: 14px;
}

.downBtn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.downBtn1 {
    background-color: #ed4a4a;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.fileBtn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.uploadBtn {
    background-color: #FF7200;
    border-radius: 8px;
    color: #fff;
    border: none;
}

.edit_btn {
    background-color: #fff;
    color: #007EFF;
    border: none;
    cursor: pointer;
}

.del_btn {
    background-color: #fff;
    color: #FF0000;
    border: none;
    cursor: pointer;
}



.header {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    overflow: auto;


    /* overflow-x: scroll !important; */
    /* display: flex;
    align-items: center;
    flex-wrap: wrap; */
}

.headerCard {
    min-width: 260px;
    border-radius: 5px;
    background-color: rgba(18, 111, 247, .1);
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.headerCard_active {
    min-width: 260px;
    border-radius: 5px;
    position: relative;
    background: url(../../assets/paymentDetailBg.png) no-repeat;
    background-size: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.headerTop {
    justify-content: space-between;
    margin: 0 24px 0 10px;
}

.headerTop p {
    color: #333;
    font-size: 14px;
}


.checkedImg {
    width: 19px;
    height: 19px;
}

.headerMain {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 1vh;
    position: absolute;
    bottom: 15px;
}



.total {
    color: #333333;
    font-size: min(2vw, 44px);
    font-weight: bold;
    text-align: center;
}

.payTotal {
    color: #333333;
    font-size: min(1.5vw, 26px);
    font-weight: bold;
    text-align: center;
}

.pName {
    color: #333333;
    font-size: 12px;
    text-align: center;
}

.xian {
    width: 1px !important;
    height: 50px;
    background-color: #CCCCCC;
    margin: 0 2vw;
}

.color1 {
    color: #fff !important;
}

.color2 {
    color: #D7E7FF !important;
}

.imgBox img,
.imgBox1 img {
    width: 15px;
}

.imgBox {
    width: 20px;
    height: 20px;
    background-color: #ECECEC;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.imgBox1 {
    width: 20px;
    height: 20px;
    background-color: #FFF;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}
</style>
